<template>
<!-- 第一个盒子用来控制整个大小  -->
    <div class="login_container">
        <!-- 第二个盒子用来控制整个登录画面大小  -->
        <div class="login_box">
            <!-- 头像区 -->
            <div class="avatar_box">
                <img src="../assets/logo.png">
            </div>
        
   <!-- 登录表单区 -->
            <el-form ref="loginFormRef"  label-width="0px" class="formele" :model="loginForm" :rules="rules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                 <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                 <el-input  prefix-icon="el-icon-s-promotion" v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                 <el-button type="primary" @click="login">登录</el-button>
                 <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
export default {
    data(){
        return{
            // 登录表单的数据绑定对象
            loginForm: {
                username: 'admin',
                password: '123456'
            },
             rules: {
          username: [
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
         }
        }
  },
  methods: {
      resetLoginForm(){
        //   拿到表单的引用对象.清空方法 表单上要写ref
          this.$refs.loginFormRef.resetFields()
      },
      login(){
        //   valid是校验数据 返回值true或faluse 通过axios调用接口拿数据
          this.$refs.loginFormRef.validate(async valid=>{
              if(!valid) return
            //   const result =await this.$http.post("login",this.loginForm)
            //   可以接收到promise文件 用async和await可以拿到数据 然后解构赋值 数据里的data
            const {data: res} =await this.$http.post("login",this.loginForm)
             if(res.meta.status!==200) return this.$message.error('登录失败')
             this.$message.success('成功')
            // 拿到token 并添加进sessionStorage中
            window.sessionStorage.setItem("token",res.data.token)
            // 通过编程式导航对象跳转到主页 地址是/home
            this.$router.push('/home')
          })
      },
 
 }
    
};
</script>



<style scoped>
.login_container {
    height: 100%;
    background-color: pink;
   
}

.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    /* 居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.avatar_box{
    height: 130px;
    width: 130px;
    border-radius: 50%;
    padding: 10px;
    /* 开启定位 设置盒子位置 */
    position:absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #eee;
   
}
.avatar_box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
}
.btns {
    /* 居右对齐 */
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.formele {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 30px;
    /* 这样输入框不会超过父级元素 */
    box-sizing: border-box;
}
</style>